<template>
  <div class="base-information">
    <BaseWindow :title="'项目基础信息统计'" :contentHeight="38">
      <template #default>
        <div class="base-i-content">
          <div style="display: flex;">
            <div>
              <QiuBoxTX :labelName="qiuList[0].name" :labelValue="qiuList[0].num" />
            </div>
            <div style="width: 100%;height: 100%;">
              <div class="row-label-img rli-size" v-show="index !== 0" v-for="(item, index) in qiuList"
                :key="'b_i_rli' + index">
                <div :class="`b-i-i-m-${index} b-i-i-size`"></div>
                <div style="line-height: 40px;"> {{ item.name + ' ： ' + item.num }}</div>
              </div>
            </div>
          </div>
          <div class="card-box" v-for="(item, index) in dList" :key="'b_i_cb' + index"
            :style="index == 0 ? 'margin-top:0.5vh' : ''">
            <ItemBox :labelName="item.name" :labelValue="item.num" :iconIndex="index + 1" />
          </div>
        </div>
      </template>
    </BaseWindow>
  </div>
</template>

<script setup>
import BaseWindow from "./BaseWindow.vue";
import ItemBox from "../iconbox/ItemBox.vue";
import QiuBoxTX from "../iconbox/QiuBoxTX.vue";
import { useBigScreenStore } from "@/pinia/bigScreen";
const bsStore = useBigScreenStore();

let dList = ref([
  { name: '项目总投资', num: '0.00 万' },
  { name: '项目运行时长', num: '0.00 天' },
  { name: '项目运行电量', num: '0.00 KWH' },
  { name: '地面照度', num: '0.00 LUX' },
  { name: '设备总功率', num: '0.00%' }
])
let qiuList = ref([
  { name: '节能率', num: '0.00%' },
  { name: '月收益率', num: '0.00%' },
  { name: '季收益率', num: '0.00%' },
  { name: '年收益率', num: '0.00%' }
])
let projectStartTimeList = ref([])

watch(() => bsStore.projectId, (newValue, oldValue) => {
  if (newValue === 'all') {
    if (localStorage.getItem("big_BaseInformation_all")) {
      dList.value = JSON.parse(localStorage.getItem("big_BaseInformation_all"))
    } else {
      getAllBaseInfoData()
    }
  } else {
    getBaseInfoData()
  }
})
const getBaseInfoData = () => {
  dList.value[0].num = parseFloat(bsStore.project.investmentAmount * 1).toFixed(2) + '万元'
  dList.value[1].num = bsStore.project.yxsc + '天'
  dList.value[2].num = parseFloat(bsStore.project.totalPowerConsumption * 1).toFixed(2) + 'KWH'
  dList.value[3].num = parseFloat(bsStore.project.illuminance * 1).toFixed(2) + ' LUX'
  dList.value[4].num = parseFloat(bsStore.project.totalPower * 1).toFixed(3) + 'KW'
  qiuList.value[0].num = parseFloat(bsStore.project.energyEfficiency * 1).toFixed(2) + ' %'
}

const getAllBaseInfoData = () => {
  let obj = { xmztz: 0, xmyxsc: 0, xmyxdl: 0, dmzd: 0, sbzgl: 0, jnl: 0, ysyl: 0, jsyl: 0, nsyl: 0 }
  bsStore.projectList.forEach((item) => {
    obj.xmztz = obj.xmztz + item.investmentAmount * 1
    let tianshu = calculatedProportion(item.projectStartTime || '')
    obj.xmyxsc = obj.xmyxsc + tianshu * 1
    obj.xmyxdl = obj.xmyxdl + item.totalPowerConsumption * 1
    obj.dmzd = obj.dmzd + item.illuminance * 1
    obj.sbzgl = obj.sbzgl + item.totalPower * 1
    obj.jnl = obj.jnl + item.energyEfficiency * 1
    let totalBattery = (item.baselineEnergy * 1 - item.totalPowerConsumption * 1)
    let yeidSm = totalBattery * item.electricityPrice / (item.investmentAmount * 10000) * 100
    let arr = calculateyield(yeidSm, tianshu)
    obj.ysyl = obj.ysyl + arr[0]
    obj.jsyl = obj.jsyl + arr[1]
    obj.nsyl = obj.nsyl + arr[2]
  })
  dList.value[0].num = obj.xmztz.toFixed(2) + '万'
  dList.value[1].num = obj.xmyxsc.toFixed(2) + '天'
  dList.value[2].num = parseFloat(obj.xmyxdl).toFixed(2) + 'KWH'
  dList.value[3].num = parseFloat(obj.dmzd).toFixed(2) + ' LUX'
  dList.value[4].num = parseFloat(obj.sbzgl).toFixed(2) + 'KM'

  qiuList.value[0].num = parseFloat(obj.jnl / bsStore.projectList.length).toFixed(2) + '%'
  qiuList.value[1].num = obj.ysyl.toFixed(2) + '%'
  qiuList.value[2].num = obj.jsyl.toFixed(2) + '%'
  qiuList.value[3].num = obj.nsyl.toFixed(2) + '%'

  localStorage.setItem("big_BaseInformation_all", JSON.stringify(dList.value))
}

onBeforeMount(() => { })

onMounted(() => { });

const calculatedProportion = (time) => {
  projectStartTimeList.value.push(time);
  let maxList = [];
  projectStartTimeList.value.map(sitem => { maxList.push(new Date(sitem).getTime()) })
  let max = Math.min.apply(null, maxList);
  return ((new Date().getTime() - max) / 1000 / 3600 / 24)
}

const calculateyield = (yeidSm, projectRuntime) => {
  let arr = []
  arr.push(yeidSm * 100 / projectRuntime * 30 / 100)
  arr.push(yeidSm * 100 / projectRuntime * 30 * 3 / 100)
  arr.push(yeidSm * 100 / projectRuntime * 365 / 100)
  return arr
}

</script>

<style lang="scss" scoped>
.base-information {
  width: 100%;

  .b-i-i-size {
    width: 28px;
    height: 28px;
    margin: 6px 10px 3px 13px;
    user-select: none;
  }

  .b-i-i-m-1 {
    background: url(/src/assets/wbe4/b-r-t-l-1.png) center no-repeat;
    background-size: cover;
  }

  .b-i-i-m-2 {
    background: url(/src/assets/wbe4/b-r-t-l-2.png) center no-repeat;
    background-size: cover;
  }

  .b-i-i-m-3 {
    background: url(/src/assets/wbe4/b-r-t-l-3.png) center no-repeat;
    background-size: cover;
  }

  .row-label-img {
    background-color: #0c3350;
  }

  .rli-size {
    border: #1380bd solid 1px;
    margin: 20px 0px 20px 10px;
    font-size: 14px;
    color: #fff;
    display: flex;
  }

  .base-i-content {
    height: 39rem;
    box-shadow: inset 0 0 40px #0fbff3;
    position: absolute;
    padding: 0px 10px;
    width: calc(100% - 20px);
  }

  .row-label-item {
    padding: 0 1vw;
    color: #fff;
    height: 3.5vh;
    line-height: 3.5vh;
    font-size: 18px;
    background-color: #072951;
    box-shadow: -10px 0px 15px #2C58A6 inset, 10px 0px 15px #2C58A6 inset;
    margin: 10px 0px;
  }

  .card-box {
    margin-bottom: 0.5vh;
    border-bottom: 1px dashed #957373;

    .row-label-text {
      height: 5vh;
      line-height: 5vh;
      width: 8vw;
      position: absolute;
      margin-top: 0px;
      margin-left: 10px;
      display: flex;
      justify-content: left;
      font-size: 16px;
      color: #fff;
    }
  }
}
</style>